<!doctype html>
<html lang="en">
<head>
<title>IMR控制图查看</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="IMR控制图查看">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/mes-import.js"></script>
<script type="text/javascript" src="../../script/js/echart/echarts.min.js"></script>
</head>

<body id="efficiencyReport" style="background: white;">
<form class="layui-form layui-form-pane">
	<div style="width: 100%;margin:0 auto;">
		<div style="margin-top: 20px;"><div id="visualization" style="width: 90%;height:400px;background: white;margin: auto;"></div></div>
	</div>
</form>
<script type="text/javascript">
	var myChart = echarts.init(document.getElementById("visualization"));
	var vm = new Vue({
		el : "#efficiencyReport",
		data : {
			tableData:[]
			,workshopSelected:""
			,workshopSels:[]
			,cpkContent:""
		}
		,init:function(){
			this.$nextTick(function() {
				this.$options.methods.searchData(this);
			});
		}
		,methods: {
            resizeChart:function(){
                myChart.resize();
            }
            ,renderTable:function(_self,data){
				layui.use(['form','table','laydate'], function() {
                        var table = layui.table;
                        var laydate = layui.laydate;
                        var form = layui.form;
                        form.on('select(workshop)', function (data) {
                            _self.workshopSelected = data.value;
                            _self.$options.methods.searchData(_self);
                        });
                        _self.cpkContent = "";
                        _self.$options.methods.drawPie(_self, data);
                    }
				);
			}
			,searchData:function(_self){
				_self = _self.target ? this : _self;
				var loadIndex;
				layui.use('layer', function(){
					var layer = layui.layer;
					loadIndex = layer.load(1);
				});
				_self.$nextTick(function() {
                    var configId = window.parent.vm.configId;
                    var scDate = window.parent.vm.scDate;
                    var isSample = window.parent.vm.isSample;
                    var remark1 = window.parent.vm.remark1;
					var remark2 = window.parent.vm.remark2;
					var remark3 = window.parent.vm.remark3;
					this.$http.post("../../spc/chartView/imrChart",{
                        configId:configId,
                        scDate:scDate
                        ,isSample:isSample
                        ,remark1:remark1,remark2:remark2,remark3:remark3
					},{emulateJSON: true}).then(function(res){
						_self.tableData = res.body;
						_self.$options.methods.renderTable(_self,res.body);
						layer.close(loadIndex);
					});
				});
			}
			,renderForm:function(){
				layui.use('form',function(){
					layui.form.render('select');
				});
			}
			,drawPie:function(_self,data){
				var avgArray = data.avgArray;//平均
				var avgRArray = data.avgRArray;//平均极差
				var calData = data.calData;//计算出来的相关控制图大小值
                var xdata = [];
                for(var i in avgArray){
                    xdata.push(parseInt(i)+1);
				}
				//平均值标注线
				var avgMarkLine = {
                    data: [
                        {name: 'CL',yAxis:calData.CL_X,lineStyle:{color:'#f00'}},
                        {name: 'UCL',yAxis:calData.UCL_X,lineStyle:{color:'#0f0'}},
                        {name: 'LCL',yAxis:calData.LCL_X,lineStyle:{color:'#00f'}}
                    ],
                    label: {
                        normal: {
                            formatter: '{b}：{c}',
                            textStyle: {
                                align: 'top'
                            }
                        }
                    }
                };
                if(calData.LSL){avgMarkLine.data.push({name: 'LSL',yAxis:calData.LSL,lineStyle:{color:'#fb0'}})};
                if(calData.Target){avgMarkLine.data.push({name: 'Target',yAxis:calData.Target,lineStyle:{color:'#f0f'}})};
                if(calData.USL){avgMarkLine.data.push({name: 'USL',yAxis:calData.USL,lineStyle:{color:'#0ff'}})};

                var maxXY = calData.maxArrayX;
                var minXY = calData.minArrayX;
                var maxXR = calData.maxArrayR;
                var minXR = calData.minArrayR;

                //方差标注线
				var rMarkLine = {
                    data: [
                        {name: 'CL',yAxis:calData.CL_R,lineStyle:{color:'#f00'}},
                        {name: 'UCL',yAxis:calData.UCL_R,lineStyle:{color:'#0f0'}},
                        {name: 'LCL',yAxis:calData.LCL_R,lineStyle:{color:'#00f'}}
                    ],
                    label: {
                        normal: {
                            formatter: '{b}：{c}',
                            textStyle: {
                                align: 'top'
                            }
                        }
                    }
                };
				myChart.clear();
				var option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    xAxis: [
                        {type: 'category', gridIndex: 0,data:xdata},
                        {type: 'category', gridIndex: 1,data:xdata}
                    ],
                    yAxis: [
                        {gridIndex: 0,min:minXY,max:maxXY,name:'单独值'},
                        {gridIndex: 1,min:minXR,max:maxXR,name:'移动极差值'}
                    ],
                    grid: [
                        {bottom: '55%'},
                        {top: '55%'}
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100,
                            xAxisIndex:[0,1]
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100,
                            yAxisIndex:[0,1]
                        }
                    ],
                    series: [
                        {type: 'line', xAxisIndex: 0, yAxisIndex: 0,data:avgArray,markLine:avgMarkLine},
                        {type: 'line', xAxisIndex: 1, yAxisIndex: 1,data:avgRArray,markLine:rMarkLine}
                    ]
                };
				myChart.setOption(option);
			}
		}
		,watch: {

		}
	});
</script>
</body>
</html>
